<template>

  <div class="about">

    <div style="margin: 10px 0">
      <el-input style="width: 200px" placeholder="请输入比赛名称" suffix-icon="el-icon-search" v-model="contestName"></el-input>
      <el-input style="width: 200px" placeholder="请输入比赛类型" suffix-icon="el-icon-message" class="ml-5" v-model="contestType"></el-input>
      <el-button class="ml-5" type="primary" @click="load"><i class="el-icon-search"></i>搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>

    <!--表单数据-->
    <!--border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange"-->
    <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'" >
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="contestName" label="竞赛名称"></el-table-column>
      <el-table-column prop="organizer" label="主办单位" ></el-table-column>
      <el-table-column prop="contestType" label="竞赛类别" ></el-table-column>
      <el-table-column prop="year" label="年份"></el-table-column>
      <!--上传、查看操作-->
      <el-table-column label="操作"  width="200" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="submitOpen(scope.row.id)">上传<i class="el-icon-upload el-icon--right"></i></el-button>
<!--          <el-button type="primary" @click="handleEdit(scope.row)">报名 <i class="el-icon-edit"></i></el-button>-->
<!--          @confirm="del(scope.row.id)"-->
<!--          <el-button type="primary" @click="submitOpen">上传<i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->
            <el-button type="success" @click="handleView(scope.row)">查看 </el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-dialog
        :visible.sync="dialogVisible"
        width="50%"
        height="auto"
        :before-close="dialogClose">
      <el-descriptions class="description" title="详细" :column="2" :size="size" border>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-trophy"></i>
            竞赛名称
          </template>
          <span>{{this.contestInfo.contestName}}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-medal"></i>
            竞赛类型
          </template>
          <el-tag size="small">{{this.contestInfo.contestType}}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-timer"></i>
            主办单位
          </template>
          <span>{{this.contestInfo.organizer}}</span>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-timer"></i>
           年份
          </template>
          <span>{{this.contestInfo.year}}</span>
        </el-descriptions-item>

      </el-descriptions>

    </el-dialog>

    <!--页码部分-->
    <!--<div style="padding: 10px 0">-->
    <div style="padding: 10px 0">
      <span class="demonstration"></span>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>


    <div>
        <el-dialog
            title="队伍创建"
            :visible.sync="submit"
            :width="dialogWidth"
            height="auto"
            :before-close="submitClose">

        <div style="margin-bottom: 20px">
<!--            设定了方法参数用来选择当人数有多少个的时候界面自动变换-->
            <el-button type="primary" @click="buttonChange('1')">人数1</el-button>
            <el-button type="success" @click="buttonChange('2')">人数2</el-button>
            <el-button type="primary" @click="buttonChange('3')">人数3</el-button>
            <el-button type="success" @click="buttonChange('4')">人数4</el-button>
            <el-button type="primary" @click="buttonChange('5')">人数5</el-button>
            <el-button type="warning" @click="resetInfo">重置</el-button>

    <h3>图片的上传在完成信息填写后进行--</h3>

        </div>
<!--          //这里时下面的输入框，为了让布局变成水平-->
        <div class="input" style="display: flex">
          <div :style="{width:widess+'%'}">
<!--            队长的表单-->
            <el-form :model="team" :rules="rules" ref="teamForm">
              <el-form-item label="队伍名称" prop="teamName">
                    <el-input v-model="team.teamName" style="max-width:70%"></el-input>
              </el-form-item>
              <el-form-item label="队长学号" prop="teamLeader.teamNumberId">
                <el-input v-model="team.teamLeader.teamNumberId" style="max-width:70%" @change="queryInfo(team.teamLeader.teamNumberId,'teamLeader')"></el-input>
              </el-form-item>
              <el-form-item label="队长名称" prop="teamLeader.name">
                <el-input v-model="team.teamLeader.name" style="max-width:70%"></el-input>
              </el-form-item>
              <el-form-item label="队长性别" prop="teamLeader.gender">
                <el-input v-model="team.teamLeader.gender" style="max-width:70%"></el-input>
              </el-form-item>
              <el-form-item label="队长邮箱" prop="teamLeader.email">
                <el-input v-model="team.teamLeader.email" style="max-width:70%"></el-input>
              </el-form-item>
              <el-form-item label="队长电话" prop="teamLeader.phone">
                <el-input v-model="team.teamLeader.phone" style="max-width:70%"></el-input>
              </el-form-item>
              <el-form-item label="队长专业" prop="teamLeader.major">
                <el-input v-model="team.teamLeader.major" style="max-width:70%"></el-input>
              </el-form-item>
            </el-form>
          </div>
<!--            指导老师表单-->
          <div :style="{width:widess+'%'}">
            <el-form :model="team" :rules="rules" ref="teacherForm">
              <el-form-item label="教师工号" prop="teamGuide.teamNumberId">
                <el-input v-model="team.teamGuide.teamNumberId" style="max-width:70%" @change="queryInfo(team.teamGuide.teamNumberId,'teamGuide')"></el-input>
              </el-form-item>
              <el-form-item label="教师名称" prop="teamGuide.name">
                <el-input v-model="team.teamGuide.name" style="max-width:70%"></el-input>
              </el-form-item>
              <el-form-item label="教师性别" prop="teamGuide.gender">
                <el-input v-model="team.teamGuide.gender" style="max-width:70%"></el-input>
              </el-form-item>
              <el-form-item label="教师邮箱" prop="teamGuide.email">
                <el-input v-model="team.teamGuide.email" style="max-width:70%"></el-input>
              </el-form-item>
              <el-form-item label="教师电话" prop="teamGuide.phone">
                <el-input v-model="team.teamGuide.phone" style="max-width:70%"></el-input>
              </el-form-item>
              <el-form-item label="所属学院" prop="teamGuide.college">
                <el-input v-model="team.teamGuide.college" style="max-width:70%"></el-input>
              </el-form-item>
            </el-form>
          </div>
<!--          成员表单-->
          <div :style="{width:widess+'%',display:view}">
            <el-form :model="team" :rules="rules" ref="Member1Form">
              <el-form-item label="成员学号" prop="teamNumber1.teamNumberId">
                <el-input v-model="team.teamNumber1.teamNumberId" style="max-width:70%" @change="queryInfo(team.teamNumber1.teamNumberId,'teamNumber1')" ></el-input>
              </el-form-item>
              <el-form-item label="成员名称" prop="teamNumber1.name">
                <el-input v-model="team.teamNumber1.name" style="max-width:70%"></el-input>
              </el-form-item>
              <el-form-item label="成员性别" prop="teamNumber1.gender">
                <el-input v-model="team.teamNumber1.gender" style="max-width:70%"></el-input>
              </el-form-item>
              <el-form-item label="成员邮箱" prop="teamNumber1.email">
                <el-input v-model="team.teamNumber1.email" style="max-width:70%"></el-input>
              </el-form-item>
              <el-form-item label="成员电话" prop="teamNumber1.phone">
                <el-input v-model="team.teamNumber1.phone" style="max-width:70%"></el-input>
              </el-form-item>
              <el-form-item label="成员专业" prop="teamNumber1.major">
                <el-input v-model="team.teamNumber1.major" style="max-width:70%"></el-input>
              </el-form-item>
            </el-form>
          </div>


        </div>
          <el-divider content-position="center">更多成员</el-divider>
<!--          这里是前面三个下面的表单-->
          <div class="input" style="display: flex">
<!--            成员2的表单-->
            <div :style="{width:widess+'%',display:view,display:view1}">
              <el-form :model="team" :rules="rules" ref="Member2Form">
                <el-form-item label="成员学号" prop="teamNumber2.teamNumberId">
                  <el-input v-model="team.teamNumber2.teamNumberId" style="max-width:70%" @change="queryInfo(team.teamNumber2.teamNumberId,'teamNumber2')"></el-input>
                </el-form-item>
                <el-form-item label="成员名称" prop="teamNumber2.name">
                  <el-input v-model="team.teamNumber2.name" style="max-width:70%"></el-input>
                </el-form-item>
                <el-form-item label="成员性别" prop="teamNumber2.gender">
                  <el-input v-model="team.teamNumber2.gender" style="max-width:70%"></el-input>
                </el-form-item>
                <el-form-item label="成员邮箱" prop="teamNumber2.email">
                  <el-input v-model="team.teamNumber2.email" style="max-width:70%"></el-input>
                </el-form-item>
                <el-form-item label="成员电话" prop="teamNumber2.phone">
                  <el-input v-model="team.teamNumber2.phone" style="max-width:70%"></el-input>
                </el-form-item>
                <el-form-item label="成员专业" prop="teamNumber2.major">
                  <el-input v-model="team.teamNumber2.major" style="max-width:70%"></el-input>
                </el-form-item>
              </el-form>
            </div>

<!--            成员3表单-->
            <div :style="{width:widess+'%',display:view,display:view2}">
              <el-form :model="team" :rules="rules" ref="Member3Form">
                <el-form-item label="成员学号" prop="teamNumber3.teamNumberId">
                  <el-input v-model="team.teamNumber3.teamNumberId" style="max-width:70%" @change="queryInfo(team.teamNumber3.teamNumberId,'teamNumber3')"></el-input>
                </el-form-item>
                <el-form-item label="成员名称" prop="teamNumber3.name">
                  <el-input v-model="team.teamNumber3.name" style="max-width:70%"></el-input>
                </el-form-item>
                <el-form-item label="成员性别" prop="teamNumber3.gender">
                  <el-input v-model="team.teamNumber3.gender" style="max-width:70%"></el-input>
                </el-form-item>
                <el-form-item label="成员邮箱" prop="teamNumber3.email">
                  <el-input v-model="team.teamNumber3.email" style="max-width:70%"></el-input>
                </el-form-item>
                <el-form-item label="成员电话" prop="teamNumber3.phone">
                  <el-input v-model="team.teamNumber3.phone" style="max-width:70%"></el-input>
                </el-form-item>
                <el-form-item label="成员专业" prop="teamNumber3.major">
                  <el-input v-model="team.teamNumber3.major" style="max-width:70%"></el-input>
                </el-form-item>
              </el-form>
            </div>
<!--              成员4表单-->
            <div :style="{width:widess+'%',display:view,display:view3}">
              <el-form :model="team" :rules="rules" ref="Member4Form">
                <el-form-item label="成员学号" prop="teamNumber4.teamNumberId">
                  <el-input v-model="team.teamNumber4.teamNumberId" style="max-width:70%" @change="queryInfo(team.teamNumber4.teamNumberId,'teamNumber4')"></el-input>
                </el-form-item>
                <el-form-item label="成员名称" prop="teamNumber4.name">
                  <el-input v-model="team.teamNumber4.name" style="max-width:70%"></el-input>
                </el-form-item>
                <el-form-item label="成员性别" prop="teamNumber4.gender">
                  <el-input v-model="team.teamNumber4.gender" style="max-width:70%"></el-input>
                </el-form-item>
                <el-form-item label="成员邮箱" prop="teamNumber4.email">
                  <el-input v-model="team.teamNumber4.email" style="max-width:70%"></el-input>
                </el-form-item>
                <el-form-item label="成员电话" prop="teamNumber4.phone">
                  <el-input v-model="team.teamNumber4.phone" style="max-width:70%"></el-input>
                </el-form-item>
                <el-form-item label="成员专业" prop="teamNumber4.major">
                  <el-input v-model="team.teamNumber4.major" style="max-width:70%"></el-input>
                </el-form-item>
              </el-form>
            </div>

          </div>


          <span slot="footer" class="dialog-footer">
           <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="formSumit">确 定</el-button>
           </span>
        </el-dialog>
  </div>


    <el-dialog
        title="上传获奖图片:"
        :visible.sync="submitPic"
        width="50%"
        height="auto"
        :before-close="PicClose">
      <!--      上传文件-->
      <el-upload
          ref="upload"
          style="margin-top: 10px"
          class="upload-image"
          action="http://localhost:9090/Common/upload"
          :data="{Info:this.team.award}"
          :headers="{Authorization:JSON.parse(localStorage.getItem('user'))}"
          :on-error="uploadError"
          :on-success="uploadSuccess"
          multiple
          :limit="1"
          :before-upload="beforeUpload"

          accept="image/jpeg,image/png">
        <!--    这里的accept设置了传输文件的格式只能为png和jpeg-->

        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-dialog>



    <el-dialog
        title="上传信息:"
        :visible.sync="sumbitFinish"
        width="50%"
        :before-close="FinishClose">




      <el-descriptions class="margin-top" title="信息列表" :column="3" :size="size" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            队伍ID:
          </template>
          {{this.team.teamId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            队伍名字:
          </template>
          {{this.team.teamName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            竞赛id:
          </template>
          {{this.team.contestId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            队长id：
          </template>
          {{this.team.teamLeader.teamNumberId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            队长名字:
          </template>
          {{this.team.teamLeader.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-phone"></i>
            队长电话:
          </template>
            {{this.team.teamLeader.phone}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            指导老师id：
          </template>
          {{this.team.teamGuide.teamNumberId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            指导老师名字:
          </template>
          {{this.team.teamGuide.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-phone"></i>
            指导老师电话:
          </template>
          {{this.team.teamGuide.phone}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            成员1id：
          </template>
          {{this.team.teamNumber1.teamNumberId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            成员1名字:
          </template>
          {{this.team.teamNumber1.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-phone"></i>
            成员1电话:
          </template>
          {{this.team.teamNumber1.phone}}
        </el-descriptions-item>
<!--        队员2-->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            成员2id：
          </template>
          {{this.team.teamNumber2.teamNumberId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            成员2名字:
          </template>
          {{this.team.teamNumber2.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-phone"></i>
            成员2电话:
          </template>
          {{this.team.teamNumber2.phone}}
        </el-descriptions-item>
<!--        队员3-->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            成员3id：
          </template>
          {{this.team.teamNumber3.teamNumberId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            成员3名字:
          </template>
          {{this.team.teamNumber3.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-phone"></i>
            成员3电话:
          </template>
          {{this.team.teamNumber3.phone}}
        </el-descriptions-item>
<!--        队员4-->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            成员4id：
          </template>
          {{this.team.teamNumber4.teamNumberId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            成员4名字:
          </template>
          {{this.team.teamNumber4.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-phone"></i>
            成员4电话:
          </template>
          {{this.team.teamNumber4.phone}}
        </el-descriptions-item>



      </el-descriptions>

    </el-dialog>


  </div>
</template>

<script>
  export default {
    name:"CreateView",
    data(){

      return{





        submitPic:false,
        localStorage: window.localStorage,
        sumbitFinish:false,
        isdisabled:false,
        originalForm:{},
        dialogVisible:false,
        total: 0,
        pageNum: 1,
        pageSize: 5,
        multipleSelection: [],
        headerBg: 'headerBg',
        tableData: [],
        contestName:"",
        contestType:"",
        button:"1",

        dialogWidth:"50",
        contestInfo: {
          id:"",
          contestName:"",
          contestType:"",
          organizer:"",
          year:"",


        },
        rules:
          {
            'teamName': [{ required: true, message: '队伍名称不能为空', trigger: 'blur' },
              { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],

            'teamLeader.name': [
              { required: true, message: '队长名称不能为空', trigger: 'blur' },
              { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }],

            'teamLeader.teamNumberId': [{ required: true, message: 'id不能为空', trigger: 'blur' },
              { pattern: /^[0-9]+$/, message: '请规范您得输入', trigger: 'blur' },
              { min: 4, max: 12, message: '长度在 4 到 12 个字符', trigger: 'blur' }],

            'teamLeader.gender': [{ required: true, message: '性别不能为空', trigger: 'blur' },
              { min: 1, max: 8, message: "请输入正确的性别!", trigger: 'blur' }],

            'teamLeader.major': [{ required: true, message: '专业不能为空', trigger: 'blur' },
              { min: 3, max: 12, message: "请输入正确的专业!", trigger: 'blur' }],

            'teamLeader.phone': [{ required: true, message: '电话不能为空', trigger: 'blur' },
              {pattern: /^1[3456789]\d{9}$/, message: '电话号码格式不正确', trigger: 'blur' },
              { max: 11, min: 11, message: '电话号码长度必须为11位', trigger: 'blur' }],

            'teamLeader.email': [{ required: true, message: 'id不能为空', trigger: 'blur' },
              {type:'email',message:'请输入正确邮箱格式',trigger:'blur'},],

            // 教师校验格式
            'teamGuide.name': [
              { required: true, message: '名称不能为空', trigger: 'blur' },
              { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }],

            'teamGuide.teamNumberId': [{ required: true, message: 'id不能为空', trigger: 'blur' },
              { pattern: /^[0-9]+$/, message: '请规范您得输入', trigger: 'blur' },
              { min: 4, max: 12, message: '长度在 4 到 12 个字符', trigger: 'blur' }],

            'teamGuide.gender': [{ required: true, message: '性别不能为空', trigger: 'blur' },
              { min: 1, max: 8, message: "请输入正确的性别!", trigger: 'blur' }],

            'teamGuide.college': [{ required: true, message: '学院不能为空', trigger: 'blur' },
              { min: 3, max: 12, message: "请输入正确的学院!", trigger: 'blur' }],

            'teamGuide.phone': [{ required: true, message: '电话不能为空', trigger: 'blur' },
              {pattern: /^1[3456789]\d{9}$/, message: '电话号码格式不正确', trigger: 'blur' },
              { max: 11, min: 11, message: '电话号码长度必须为11位', trigger: 'blur' }],

            'teamGuide.email': [{ required: true, message: 'id不能为空', trigger: 'blur' },
              {type:'email',message:'请输入正确邮箱格式',trigger:'blur'},],
            //成员1校验格式
            'teamNumber1.name': [
              { required: true, message: '名称不能为空', trigger: 'blur' },
              { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }],

            'teamNumber1.teamNumberId': [{ required: true, message: 'id不能为空', trigger: 'blur' },
              { pattern: /^[0-9]+$/, message: '请规范您得输入', trigger: 'blur' },
              { min: 4, max: 12, message: '长度在 4 到 12 个字符', trigger: 'blur' }],

            'teamNumber1.gender': [{ required: true, message: '性别不能为空', trigger: 'blur' },
              { min: 1, max: 8, message: "请输入正确的性别!", trigger: 'blur' }],

            'teamNumber1.major': [{ required: true, message: '专业不能为空', trigger: 'blur' },
              { min: 3, max: 12, message: "请输入正确的专业!", trigger: 'blur' }],

            'teamNumber1.phone': [{ required: true, message: '电话不能为空', trigger: 'blur' },
              {pattern: /^1[3456789]\d{9}$/, message: '电话号码格式不正确', trigger: 'blur' },
              { max: 11, min: 11, message: '电话号码长度必须为11位', trigger: 'blur' }],

            'teamNumber1.email': [{ required: true, message: 'id不能为空', trigger: 'blur' },
              {type:'email',message:'请输入正确邮箱格式',trigger:'blur'},],

            //成员2校验格式
            'teamNumber2.name': [
              { required: true, message: '名称不能为空', trigger: 'blur' },
              { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }],

            'teamNumber2.teamNumberId': [{ required: true, message: 'id不能为空', trigger: 'blur' },
              { pattern: /^[0-9]+$/, message: '请规范您得输入', trigger: 'blur' },
              { min: 4, max: 12, message: '长度在 4 到 12 个字符', trigger: 'blur' }],

            'teamNumber2.gender': [{ required: true, message: '性别不能为空', trigger: 'blur' },
              { min: 1, max: 8, message: "请输入正确的性别!", trigger: 'blur' }],

            'teamNumber2.major': [{ required: true, message: '专业不能为空', trigger: 'blur' },
              { min: 3, max: 12, message: "请输入正确的专业!", trigger: 'blur' }],

            'teamNumber2.phone': [{ required: true, message: '电话不能为空', trigger: 'blur' },
              {pattern: /^1[3456789]\d{9}$/, message: '电话号码格式不正确', trigger: 'blur' },
              { max: 11, min: 11, message: '电话号码长度必须为11位', trigger: 'blur' }],

            'teamNumber2.email': [{ required: true, message: 'id不能为空', trigger: 'blur' },
              {type:'email',message:'请输入正确邮箱格式',trigger:'blur'},],

            // 成员3校验格式
            'teamNumber3.name': [
              { required: true, message: '名称不能为空', trigger: 'blur' },
              { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }],

            'teamNumber3.teamNumberId': [{ required: true, message: 'id不能为空', trigger: 'blur' },
              { pattern: /^[0-9]+$/, message: '请规范您得输入', trigger: 'blur' },
              { min: 4, max: 12, message: '长度在 4 到 12 个字符', trigger: 'blur' }],

            'teamNumber3.gender': [{ required: true, message: '性别不能为空', trigger: 'blur' },
              { min: 1, max: 8, message: "请输入正确的性别!", trigger: 'blur' }],

            'teamNumber3.major': [{ required: true, message: '专业不能为空', trigger: 'blur' },
              { min: 3, max: 12, message: "请输入正确的专业!", trigger: 'blur' }],

            'teamNumber3.phone': [{ required: true, message: '电话不能为空', trigger: 'blur' },
              {pattern: /^1[3456789]\d{9}$/, message: '电话号码格式不正确', trigger: 'blur' },
              { max: 11, min: 11, message: '电话号码长度必须为11位', trigger: 'blur' }],

            'teamNumber3.email': [{ required: true, message: 'id不能为空', trigger: 'blur' },
              {type:'email',message:'请输入正确邮箱格式',trigger:'blur'},],

            //成员4校验格式
            'teamNumber4.name': [
              { required: true, message: '名称不能为空', trigger: 'blur' },
              { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }],

            'teamNumber4.teamNumberId': [{ required: true, message: 'id不能为空', trigger: 'blur' },
              { pattern: /^[0-9]+$/, message: '请规范您得输入', trigger: 'blur' },
              { min: 4, max: 12, message: '长度在 4 到 12 个字符', trigger: 'blur' }],

            'teamNumber4.gender': [{ required: true, message: '性别不能为空', trigger: 'blur' },
              { min: 1, max: 8, message: "请输入正确的性别!", trigger: 'blur' }],

            'teamNumber4.major': [{ required: true, message: '专业不能为空', trigger: 'blur' },
              { min: 3, max: 12, message: "请输入正确的专业!", trigger: 'blur' }],

            'teamNumber4.phone': [{ required: true, message: '电话不能为空', trigger: 'blur' },
              {pattern: /^1[3456789]\d{9}$/, message: '电话号码格式不正确', trigger: 'blur' },
              { max: 11, min: 11, message: '电话号码长度必须为11位', trigger: 'blur' }],

            'teamNumber4.email': [{ required: true, message: 'id不能为空', trigger: 'blur' },
              {type:'email',message:'请输入正确邮箱格式',trigger:'blur'},],

          },


    // 初始宽度：
        widess:50,
        pngwidth:100,
    //需要一个算法，还要一个变量，用来算当人数为1的时候，自动调节宽度
        radio: '人数1',
      // 把数据包装成一个数组用
        temp:null,
        //这个参数是传进自动搜索信息
        propId:'',
        size: '',
        submit:false,
        view:'none',
        view1:'none',
        view2:'none',
        view3:'none',
            team:{
              teamId:"",
              teamName:"",
              award:"",
              contestId:"",
                teamLeader:{
                  teamNumberId:"",
                  major:"",
                  name:"",
                  phone:"",
                  email:"",
                  gender:"",
                },
                teamGuide:{
                  teamNumberId:"",
                  college:"",
                  name:"",
                  phone:"",
                  email:"",
                  gender:"",
                },
                teamNumber1:{
                  teamNumberId:"",
                  major:"",
                  name:"",
                  phone:"",
                  email:"",
                  gender:"",
                },
                teamNumber2:{
                  teamNumberId:"",
                  major:"",
                  name:"",
                  phone:"",
                  email:"",
                  gender:"",
                },
              teamNumber3:{
                teamNumberId:"",
                major:"",
                name:"",
                phone:"",
                email:"",
                gender:"",
              },
              teamNumber4:{
                teamNumberId:"",
                major:"",
                name:"",
                phone:"",
                email:"",
                gender:"",
              },

            },



      }







    },
    created() {
      this.load()
    },
    methods: {
      PicClose(){
      this.submitPic=false;
      },


      uploadSuccess(){
        this.$message.success("成功")
          this.submitPic=false;
          this.request.post("/Team/submitForm",this.team).then(res=>{
            if (res.code==='200'){
              this.team.teamId = res.data;

              this.sumbitFinish = true;
              this.$message.success("上传成功")

              this.submit = false;
              this.$refs.upload.clearFiles();

            }else {
              this.$message.error("上传失败")
            }
          }).catch((error)=>{
            this.$message.error("系统错误")
          })

      },
      uploadError(){
        this.$message.error("根源错误")
      },
      //在上传图片前对图片进行处理，由于设置了格式所以只能上传jpeg和png
      beforeUpload(file){
        const isJpgPng = file.type==='image/jpeg'||file.type==='image/png';
        const isLt500KB = file.size / 1024 <= 500;

        if (!isJpgPng) {
          this.$message.error('只能上传 JPG/PNG 格式的图片');
          return false;
        }
        if (!isLt500KB) {
          this.$message.error('上传的图片大小不能超过 500KB');
          return false;
        }




        return isJpgPng && isLt500KB;
      },


      handleSizeChange(pageSize) {
        console.log(pageSize)
        this.pageSize = pageSize
        this.load()
      },
      handleCurrentChange(pageNum) {
        console.log(pageNum)
        this.pageNum = pageNum
        this.load()
      },
      //点击查看得时候打开得窗口
      handleView(row) {
        this.contestInfo = row
        this.dialogVisible = true
      },
      dialogClose() {
        this.dialogVisible = false;
      },
      load() {
        this.request.get("/admin/contestinfo/page", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            contestName: this.contestName,
            contestType: this.contestType,
          }
        }).then(res => {
          console.log(res)

          this.tableData = res.data.records
          this.total = res.data.total

        })
      },
      reset() {
        this.contestName = ""
        this.contestType = ""
        this.load()
      },
      queryInfo(id,form) {
        if (id===null||id===undefined){
            return;
        }

        this.request.get("/Users/getInfo", {params: {id: id}}).then(res => {
          if (res) {
            switch (form){
              case 'teamLeader':
                if (res.usersRole==='老师'){
                  this.$message.warning("请按照正确方式输入信息!")
                  break;
                }
                this.team.teamLeader.name = res.name;
                this.team.teamLeader.gender = res.gender;
                this.team.teamLeader.email = res.email;
                this.team.teamLeader.phone = res.phone;
                this.team.teamLeader.major = res.major;
                this.$message.success("成功")
                console.log(this.team.teamLeader.name)
                break;
              case 'teamGuide':
                console.log(res.usersRole)
                if (res.usersRole==='学生'){
                  this.$message.warning("请按照正确方式输入信息!")
                  break;
                }
                this.team.teamGuide.name = res.name;
                this.team.teamGuide.gender = res.gender;
                this.team.teamGuide.email = res.email;
                this.team.teamGuide.phone = res.phone;
                this.team.teamGuide.college = res.college;
                this.$message.success("成功")
                break;
              case 'teamNumber1':
                if (res.usersRole==='老师'){
                  this.$message.warning("请按照正确方式输入信息!")
                  break;
                }
                this.team.teamNumber1.name = res.name;
                this.team.teamNumber1.gender = res.gender;
                this.team.teamNumber1.email = res.email;
                this.team.teamNumber1.phone = res.phone;
                this.team.teamNumber1.major = res.major;
                this.$message.success("成功")
                break;
              case 'teamNumber2':
                if (res.usersRole==='老师'){
                  this.$message.warning("请按照正确方式输入信息!")
                  break;
                }
                this.team.teamNumber2.name = res.name;
                this.team.teamNumber2.gender = res.gender;
                this.team.teamNumber2.email = res.email;
                this.team.teamNumber2.phone = res.phone;
                this.team.teamNumber2.major = res.major;
                this.$message.success("成功")
                break;
              case 'teamNumber3':
                if (res.usersRole==='老师'){
                  this.$message.warning("请按照正确方式输入信息!")
                  break;
                }
                this.team.teamNumber3.name = res.name;
                this.team.teamNumber3.gender = res.gender;
                this.team.teamNumber3.email = res.email;
                this.team.teamNumber3.phone = res.phone;
                this.team.teamNumber3.major = res.major;
                this.$message.success("成功")
                break;
              case 'teamNumber4':
                if (res.usersRole==='老师'){
                  this.$message.warning("请按照正确方式输入信息!")
                  break;
                }
                this.team.teamNumber4.name = res.name;
                this.team.teamNumber4.gender = res.gender;
                this.team.teamNumber4.email = res.email;
                this.team.teamNumber4.phone = res.phone;
                this.team.teamNumber4.major = res.major;
                this.$message.success("成功")
                break;
                default:
                  this.$message.error("系统错误!")
                    break;
            }

            //这个只是调试用而已

          }
        }).catch((error) => {

          this.$message.warning("暂无此用户，或者手动加入")
        })


      },
      FinishClose(){
       this.sumbitFinish = false;
      },

      handleCancel() {
        this.submit = false;
      },
      submitClose() {
        this.$confirm('确定关闭？', '提示', {
          confirmButtonText: '放弃',
          cancelButtonText: '关闭',
          type: 'warning'
        }).then(() => {
          this.submit = true
        }).catch(() => {
          this.submit = false
        })

      },
      // 这里要加一个方法，是按钮的方法，用来改变上面的值从而让宽度发生变化
      buttonChange(param) {
        switch (param) {
          case '1':
            this.button = "1";
            this.widess = 50;

            this.dialogWidth = '50%';
            this.view = 'none';
            this.view1 = 'none';
            this.view2 = 'none';
            this.view3 = 'none';


            break;
          case '2':
            this.button = "2";
            this.dialogWidth = '70%';
            this.widess = 100 / 3
            this.view = 'block';
            this.view1 = 'none';
            this.view2 = 'none';
            this.view3 = 'none';
            break;
          case '3':
            this.button = "3";
            this.dialogWidth = '80%';
            this.widess = 100 / 4
            this.view = 'block';
            this.view1 = 'block';
            this.view2 = 'none';
            this.view3 = 'none';
            break;
          case '4':
            this.button = "4";
            this.dialogWidth = '80%'
            this.widess = 100 / 4
            this.view = 'block';
            this.view1 = 'block';
            this.view2 = 'block';
            this.view3 = 'none';
            break;
          case '5':
            this.button = "5";
            this.dialogWidth = '80%';
            this.widess = 100 / 4
            this.view = 'block';
            this.view1 = 'block';
            this.view2 = 'block';
            this.view3 = 'block';
            break;

        }
      },

      submitOpen(id) {
        this.team.contestId = id;
        console.log(this.team.contestId)
      // 打开后对表单的清除
        this.submit = true;
        //这个代码是因为我们的表单需要渲染完成才能重置，是必要函数
        this.$nextTick(() => {
          this.$refs.teamForm.resetFields();
          this.$refs.teacherForm.resetFields();
          this.$refs.Member1Form.resetFields();
          this.$refs.Member2Form.resetFields();
          this.$refs.Member3Form.resetFields();
          this.$refs.Member4Form.resetFields();
        });



      },
      formSumit(){
        switch (this.button) {

          case '1':
            Promise.all([this.$refs.teamForm.validate(), this.$refs.teacherForm.validate()])
                .then(([valid1, valid2]) => {
                  if (valid1 && valid2) {
                    this.team.award=this.team.teamGuide.teamNumberId+this.team.teamLeader.teamNumberId+this.team.contestId;
                    this.submitPic = true;
                  } else {
                    this.$message.error("请正确填写信息!")
                  }
                }).catch((error) => {
              this.$message.error("请正确填写信息!")
            })


            break;
          case '2':
            Promise.all([this.$refs.teamForm.validate(), this.$refs.teacherForm.validate(), this.$refs.Member1Form.validate()])
                .then(([valid1, valid2, valid3]) => {
                  if (valid1 && valid2 && valid3) {
                    this.team.award=this.team.teamGuide.teamNumberId+this.team.teamLeader.teamNumberId+this.team.teamNumber1.teamNumberId
                        +this.team.contestId;
                    this.submitPic = true;

                  } else {
                    this.$message.error("请正确填写信息!")
                  }
                }).catch((error) => {
              this.$message.error("请正确填写信息!")
            })
            break;
          case '3':
            Promise.all([this.$refs.teamForm.validate(), this.$refs.teacherForm.validate(), this.$refs.Member1Form.validate(),
              this.$refs.Member2Form.validate()])
                .then(([valid1, valid2, valid3, valid4]) => {
                  if (valid1 && valid2 && valid3 && valid4) {
                    this.team.award=this.team.teamGuide.teamNumberId+this.team.teamLeader.teamNumberId+this.team.teamNumber1.teamNumberId
                        +this.team.teamNumber2.teamNumberId+this.team.contestId;

                    this.submitPic = true;

                  } else {
                    this.$message.error("请正确填写信息!")
                  }
                }).catch((error) => {
              this.$message.error("请正确填写信息!")
            })
            break;
          case '4':
            Promise.all([this.$refs.teamForm.validate(), this.$refs.teacherForm.validate(), this.$refs.Member1Form.validate(),
              this.$refs.Member2Form.validate(), this.$refs.Member3Form.validate()])
                .then(([valid1, valid2, valid3, valid4, valid5]) => {
                  if (valid1 && valid2 && valid3 && valid4 && valid5) {
                    this.team.award=this.team.teamGuide.teamNumberId+this.team.teamLeader.teamNumberId+this.team.teamNumber1.teamNumberId
                        +this.team.teamNumber2.teamNumberId+this.team.teamNumber3.teamNumberId+this.team.contestId;
                    this.submitPic = true;
                  } else {
                    this.$message.error("请正确填写信息!")
                  }
                }).catch((error) => {
              this.$message.error("请正确填写信息!")
            })
            break;
          case '5':
            Promise.all([this.$refs.teamForm.validate(), this.$refs.teacherForm.validate(), this.$refs.Member1Form.validate(),
              this.$refs.Member2Form.validate(), this.$refs.Member3Form.validate(), this.$refs.Member4Form.validate()])
                .then(([valid1, valid2, valid3, valid4, valid5, valid6]) => {
                  if (valid1 && valid2 && valid3 && valid4 && valid5 && valid6) {
                    this.team.award=this.team.teamGuide.teamNumberId+this.team.teamLeader.teamNumberId+this.team.teamNumber1.teamNumberId
                        +this.team.teamNumber2.teamNumberId+this.team.teamNumber3.teamNumberId+this.team.teamNumber4.teamNumberId+this.team.contestId;
                    this.submitPic = true;

                  } else {
                    this.$message.error("请正确填写信息!")
                  }
                }).catch((error) => {
              this.$message.error("请正确填写信息!")
            })
            break;
        }

        //这里要加判断，判断按钮是多少，再根据按钮来判断哪个表需要提交
      },
      //重置表单
      resetInfo(){
        this.$refs.teamForm.resetFields();
        this.$refs.teacherForm.resetFields();
        this.$refs.Member1Form.resetFields();
        this.$refs.Member2Form.resetFields();
        this.$refs.Member3Form.resetFields();
        this.$refs.Member4Form.resetFields();
      }



    }

  }



</script>
<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
